<script setup>
import Tail from "@/components/Tail.vue";
import {ref} from "vue";
import {getArticle, getHeat, getVideos} from "@/api/ContentApi.js";
import {secondToTime, getTime} from "@/util/util.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

// 查询页数
const videoPage = {
  // 当前页数
  current: 1,
  // 每页条数
  size: 10
};


const menuIndex = ref("1");
const videos = ref([]);
const articles = ref([]);
const heatVideos = ref([]);


function handleClick(tab, event) {
  const index = tab.props.name;
  switch (index) {
    // 热度页
    case '0': {
      getHeat().then(resp=>{
        heatVideos.value = resp.data;
        for (let index1 in heatVideos.value) {
          heatVideos.value[index1].type = "video";
        }
      }).catch(resp=>{
        ElMessage({
          message: '查询失败！',
          type: 'warning'
        });
      })
      break;
    }
  }
}



// 查询全部视频
getVideos(videoPage.current, videoPage.size).then(res=>{
  videos.value = res.data;
  for (let index in videos.value) {
    videos.value[index].type = "video";
  }
}).catch(err=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
});
// 查询全部文章
getArticle().then(resp=>{
  articles.value = resp.data;
  for (let index in articles.value) {
    articles.value[index].type = "article";
  }
}).catch(resp=>{
  ElMessage({
    message: '查询失败！',
    type: 'warning'
  });
})
</script>
<template>
  <div class="main" style="width: 1400px; margin: 0 auto; overflow: auto;">
    <el-main style="padding: 0">
      <el-carousel height="420px" style="width: 810px; border-radius: 10px; margin: 15px; float: left">
        <el-carousel-item v-for="item in videos.slice(0,5)" :key="item" style="background-color: #8c939d" @click="router.push('/video?id='+item.id)">
          <img class="carousel_img" :src="item.coverUrl">
          <div class="carousel_title">{{item.title}}<div style="font-size: 12px; margin-top: 3px;">{{item.intro}}</div></div>
        </el-carousel-item>
      </el-carousel>
      <span class="videoBox" v-for="video in videos.slice(0,4)" @click="router.push('/video?id='+video.id)">
        <img class="videoBox_img" :src="video.coverUrl">
        <div class="videoBox_totalTime">
            <div style="float: left; margin-left: 2px; min-width: 44px; height: 20px">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 6px 3px">
                    <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                    <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                </svg>
                <div style="float: left">{{video.tapNum}}</div>
            </div>
            {{secondToTime(video.videoTotalTime)}}
        </div>
        <div class="videoBox_title">{{video.title}}</div>
        <div class="videoBox_bottom">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
            <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
            <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
            <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
          </svg>
          {{video.username}}
          <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
            {{getTime(video.setTime,1)}}
          </div>
        </div>
      </span>
    </el-main>
    <el-tabs v-model="menuIndex" class="demo-tabs" @tab-click="handleClick" style="width: 1400px;  position: sticky; top: 50px;">
      <el-tab-pane name="0">
          <template #label>
              <span class="custom-tabs-label">
                  &ensp;
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="color: red; ">
                      <path d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15Z"/>
                  </svg>
                  <span> 热度&emsp;</span>
              </span>
          </template>
          <div v-for="(video, index) in heatVideos" style="height: 160px; width: 600px; margin: 5px 0;">
              <div v-if="index===0" style="color: goldenrod; font-size: 30px; margin: 60px 10px; float: left">1</div>
              <span v-else-if="index===1" style="color: goldenrod; font-size: 30px; margin: 60px 10px; float: left">2</span>
              <span v-else-if="index===2" style="color: goldenrod; font-size: 30px; margin: 60px 10px; float: left">3</span>
              <span v-else style="font-size: 30px; margin: 60px 10px; float: left;">{{index+1}}</span>
              <img class="videoBox_img" style="float: left" :src="video.coverUrl">
              <span>{{video.title}}</span>
              <div style="font-size: 13px;">{{video.intro}}</div>
          </div>
          <span class="videoBox" v-for="video in heatVideos" @click="router.push('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">
                  {{getTime(video.setTime,1)}}
                  <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                  <div style="line-height: 20px; float: right">{{video.tapNum}}</div>
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="margin: 2px; float: right">
                      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                  </svg>
              </div>
              </div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;推荐&emsp;" name="1"  v-infinite-scroll="load">
          <span class="videoBox" v-for="video in videos" @click="router.push('/video?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">
                  <div style="float: left; margin-left: 2px; min-width: 44px; height: 20px">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 6px 3px">
                          <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                          <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                      </svg>
                      <div style="float: left">{{video.tapNum}}</div>
                  </div>
                  {{secondToTime(video.videoTotalTime)}}
              </div>
              <div v-if="video.needSMember" class="vip-badge">会员专享</div>
              <div class="videoBox_title">
                  <span v-if="video.title.length > 20">
                      {{video.title.slice(0,20)}}...
                  </span>
                  <span v-else>
                      {{video.title}}
                  </span>
              </div>
              <div class="videoBox_bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                      <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                      <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                      <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                  </svg>
                  {{video.username}}
                  <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                      {{getTime(video.setTime,1)}}
                  </div>
              </div>
          </span>
          <span class="videoBox" v-for="article in articles" @click="open('/article/index.html?id='+article.id)">
              <img class="videoBox_img" :src="article.coverUrl">
              <el-tag type="info" effect="plain" v-if="article.type==='article'" size="small" style="float: left; height: 17px; width: 30px; margin: 4px 4px 4px 4px">文章</el-tag>
              <div class="videoBox_title">{{article.title}}</div>
              <div class="videoBox_bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                      <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                      <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                      <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                  </svg>
                  {{article.username}}
                  <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                      {{getTime(article.setTime,1)}}
                  </div>
              </div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;综艺&emsp;" name="2">
          <span class="videoBox" v-for="video in videos.slice(2,7)" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                      <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                      <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                      <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                  </svg>
                  {{video.username}}
                  <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                      {{getTime(video.setTime,1)}}
                  </div>
              </div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;动画&emsp;" name="3">
          <span class="videoBox" v-for="video in videos" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">{{new Date(video.setTime).getFullYear()}}/{{new Date(video.setTime).getMonth()+1}}/{{new Date(video.setTime).getDate()}}</div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;美食&emsp;" name="4">
          <span class="videoBox" v-for="video in videos" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">{{new Date(video.setTime).getFullYear()}}/{{new Date(video.setTime).getMonth()+1}}/{{new Date(video.setTime).getDate()}}</div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;科技&emsp;" name="5">
          <span class="videoBox" v-for="video in videos" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">{{new Date(video.setTime).getFullYear()}}/{{new Date(video.setTime).getMonth()+1}}/{{new Date(video.setTime).getDate()}}</div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;运动&emsp;" name="6">
          <span class="videoBox" v-for="video in videos.slice(0, 5)" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">{{getTime(video.setTime,1)}}</div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;汽车&emsp;" name="7">
          <span class="videoBox" v-for="video in videos.slice(1,5)" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">{{secondToTime(video.videoTotalTime)}}</div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">{{getTime(video.setTime,1)}}</div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;视频&emsp;" name="8">
          <span class="videoBox" v-for="video in videos" @click="open('/video/index.html?id='+video.id)">
              <img class="videoBox_img" :src="video.coverUrl">
              <div class="videoBox_totalTime">
                  <div style="float: left; margin-left: 2px; min-width: 44px; height: 20px">
                      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="#ffffff" class="bili-video-card__stats--icon" style="float: left; margin: 6px 3px">
                          <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                          <path d="M14.7138 10.96875C15.50765 11.4271 15.50765 12.573 14.71375 13.0313L11.5362 14.8659C10.74235 15.3242 9.75 14.7513 9.75001 13.8346L9.75001 10.1655C9.75001 9.24881 10.74235 8.67587 11.5362 9.13422L14.7138 10.96875z" fill="currentColor"></path>
                      </svg>
                      <div style="float: left">{{video.tapNum}}</div>
                  </div>
                  {{secondToTime(video.videoTotalTime)}}
              </div>
              <div class="videoBox_title">{{video.title}}</div>
              <div class="videoBox_bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                      <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                      <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                      <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                  </svg>
                  {{video.username}}
                  <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                      {{getTime(video.setTime,1)}}
                  </div>
              </div>
          </span>
      </el-tab-pane>
      <el-tab-pane label="&emsp;文章&emsp;" name="9">
            <span class="videoBox" v-for="article in articles" @click="open('/article/index.html?id='+article.id)">
                <img class="videoBox_img" :src="article.coverUrl">
                <el-tag type="info" effect="plain" v-if="article.type==='article'" size="small" style="float: left; height: 17px; width: 30px; margin: 4px 4px 4px 4px">文章</el-tag>
                <div class="videoBox_title">{{article.title}}</div>
                <div class="videoBox_bottom">
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" class="bili-video-card__info--owner__up">
                        <path d="M6.15 8.24805C6.5642 8.24805 6.9 8.58383 6.9 8.99805L6.9 12.7741C6.9 13.5881 7.55988 14.248 8.3739 14.248C9.18791 14.248 9.8478 13.5881 9.8478 12.7741L9.8478 8.99805C9.8478 8.58383 10.1836 8.24805 10.5978 8.24805C11.012 8.24805 11.3478 8.58383 11.3478 8.99805L11.3478 12.7741C11.3478 14.41655 10.01635 15.748 8.3739 15.748C6.73146 15.748 5.4 14.41655 5.4 12.7741L5.4 8.99805C5.4 8.58383 5.73578 8.24805 6.15 8.24805z" fill="currentColor"></path>
                        <path d="M12.6522 8.99805C12.6522 8.58383 12.98795 8.24805 13.4022 8.24805L15.725 8.24805C17.31285 8.24805 18.6 9.53522 18.6 11.123C18.6 12.71085 17.31285 13.998 15.725 13.998L14.1522 13.998L14.1522 14.998C14.1522 15.4122 13.8164 15.748 13.4022 15.748C12.98795 15.748 12.6522 15.4122 12.6522 14.998L12.6522 8.99805zM14.1522 12.498L15.725 12.498C16.4844 12.498 17.1 11.8824 17.1 11.123C17.1 10.36365 16.4844 9.74804 15.725 9.74804L14.1522 9.74804L14.1522 12.498z" fill="currentColor"></path>
                        <path d="M12 4.99805C9.48178 4.99805 7.283 5.12616 5.73089 5.25202C4.65221 5.33949 3.81611 6.16352 3.72 7.23254C3.60607 8.4998 3.5 10.171 3.5 11.998C3.5 13.8251 3.60607 15.4963 3.72 16.76355C3.81611 17.83255 4.65221 18.6566 5.73089 18.7441C7.283 18.8699 9.48178 18.998 12 18.998C14.5185 18.998 16.7174 18.8699 18.2696 18.74405C19.3481 18.65655 20.184 17.8328 20.2801 16.76405C20.394 15.4973 20.5 13.82645 20.5 11.998C20.5 10.16965 20.394 8.49877 20.2801 7.23205C20.184 6.1633 19.3481 5.33952 18.2696 5.25205C16.7174 5.12618 14.5185 4.99805 12 4.99805zM5.60965 3.75693C7.19232 3.62859 9.43258 3.49805 12 3.49805C14.5677 3.49805 16.8081 3.62861 18.3908 3.75696C20.1881 3.90272 21.6118 5.29278 21.7741 7.09773C21.8909 8.3969 22 10.11405 22 11.998C22 13.88205 21.8909 15.5992 21.7741 16.8984C21.6118 18.7033 20.1881 20.09335 18.3908 20.23915C16.8081 20.3675 14.5677 20.498 12 20.498C9.43258 20.498 7.19232 20.3675 5.60965 20.2392C3.81206 20.0934 2.38831 18.70295 2.22603 16.8979C2.10918 15.5982 2 13.8808 2 11.998C2 10.1153 2.10918 8.39787 2.22603 7.09823C2.38831 5.29312 3.81206 3.90269 5.60965 3.75693z" fill="currentColor"></path>
                    </svg>
                    {{article.username}}
                    <div style="float: right; margin-right: 2px; min-width: 44px; height: 20px">
                        {{getTime(article.setTime,1)}}
                    </div>
                </div>
            </span>
      </el-tab-pane>
    </el-tabs>
  </div>
  <Tail></Tail>
  <el-backtop :right="100" :bottom="100" :visibility-height="1">
    <div style="height: 100%; width: 100%; text-align: center; line-height: 40px; font-size: 14px; color: #1989fa;">
      顶部
    </div>
  </el-backtop>
</template>
<style scoped>
.vip-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.videoBox {
  position: relative;
  float: left;
  width: 250px;
  height: 200px;
  margin: 15px;
  border-radius: 10px;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transform-origin: center center;
}
.videoBox:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.videoBox_img {
  position: relative;
  height: 150px;
  width: 250px;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease;
  object-fit: cover;
  top: 0;
  left: 0;
}
.videoBox_img:hover {
  height: 158px;
  width: 258px;
  top: -4px;
  left: -4px;
}
.videoBox_img:hover+.videoBox_totalTime {
  width: 254px;
  left: -4px;
  top: 124px;
  opacity: 0;
  background-color: rgba(0,0,0,0);
  backdrop-filter: blur(0);
}

.videoBox_totalTime {
  position: absolute;
  top: 120px;
  left: 0;
  text-align: right;
  padding-right: 4px;
  width: 246px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;
  opacity: 1;
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
  z-index: 2;
}

.videoBox_title {
  width: 100%;
  height: 25px;
  line-height: 25px;
  transition: 0.2s ease-out;
  margin: 0 1px;
}
.videoBox_title:hover {
  color: #00AEEC;
}

.videoBox_bottom {
  margin: 0 1px;
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #8c939d;
}
.videoBox_bottom:hover {
  color: var(--subject-color);
}

.bili-video-card__stats--icon {
  text-align: left;
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
  pointer-events: none;
  font-size: 13px;
  line-height: 18px;
  fill: rgb(255, 255, 255);
  /* overflow: hidden; */
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  margin-right: 2px;
  width: 18px;
  height: 18px;
  color: #fff;
}

.bili-video-card__info--owner__up {
  text-align: left;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-size: 100%;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  cursor: pointer;
  fill: currentcolor;
  /* overflow: hidden; */
  vertical-align: middle;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: inherit;
  margin-right: 2px;
  width: 17px;
  height: 17px;
}

.carousel_img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 10px;
}

.carousel_title {
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0.5), rgba(0,0,0,0.7));
  /* background-color: rgba(255, 255, 255, 0.2); */
  font-size: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 5px 5px 15px 15px;
  min-height: 50px;
  width: 800px;
  color: white;
  transition: 0.2s ease-out;
}
.carousel_img:hover+.carousel_title, .carousel_title:hover {
  color: white;
  /* background-color: rgba(0, 0, 0, 0.5); */
  backdrop-filter: blur(20px);
}

.videoBox:hover .videoBox_img {
  height: 150px;
  width: 100%;
  top: 0;
  left: 0;
}

.videoBox:hover .videoBox_totalTime {
  background-color: rgba(0,0,0,0.4);
}
</style>
